// jQuery Gritter styles
// -------------------------------

.gritter-item-wrapper {
	background-image:none;
	background-color: @themeColor;
	.opacity(0.90);
	
	&.gritter-light, &.light {
		background: @gray-lighter;
		
		.gritter-item , .gritter-close{
			color: @gray;
		}
		.gritter-title {
			text-shadow: none;
			color: @gray;
		}

		.gritter-close {
			&:before {
				color: @gray;
			}
		}			
	}
	
	&.dark, &.bg-info, &.bg-succsss, &.bg-primary, &.bg-success, &.bg-warning, .inverse {
		.gritter-item {
			color: @white;
		}		
		
	}
	
	.gritter-top, .gritter-bottom, .gritter-item {
		background-image:none!important;
	}
	
	.gritter-image {
		border: 2px solid @default-border-color;
		margin: 2px 10px 0 0;
	}
}

.gritter-item {
	color: @gray-lighter;
	font-family:@baseFontFamily!important;
}

.gritter-close {
	left:auto; right:10px; top: 7px;	
	background:none!important;

	width:18px;	height:18px; line-height:17px;
	text-align:center;
	border:2px solid transparent;
	border-radius:0;
	display: block!important;

	color:@gray-lighter;
	
	&:before {
		content: 'x'!important;
		font-size: @baseFontSize + 6!important;
		text-indent: 0!important;
		position: absolute!important;
		text-align: center!important;
		right: 0!important;
		top: 0!important;
		color: @white;
	}
	
	&:hover, &:focus, &:active {
		color: @white;
		text-decoration: none;
	}
}


.gritter-title {
 text-shadow:none;
 padding: 0px 0px 2px;
 font-weight: 500;
 color: @white;
}

.gritter-center {
  position:fixed;
  left:33%; right:33%; top:33%;
    
  .gritter-with-image {
	float: left;
	width: auto;
  }
}

@media (max-width:767px) {
	.gritter-center {
		left:30px; right:30px;
	}
}